<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="complaint">
      <xlNavBar :isShare="isShare" title="投诉反馈" :isMark="true" bgc="ff9d49"></xlNavBar>
      <div class="content_text container">您的每一次建议都是对餐饮信息网的帮助，为了更好地开展服务和工作，我们广泛听取您的意见，以改进我们的工作质量,希望得到您的支持</div>
      <u--textarea class="area" maxlength="500" adjustPosition autoHeight v-model="content" placeholder="请输入您的意见，在这里描述下吧" count></u--textarea>
      <div class="submit" @click="submit">提交意见</div>
      <div class="seeHistory" @click="seeHistory">
        <div class="text">查看反馈历史</div>
        <image class="icon" src="/pages3/static/ckfkls.png" mode="scaleToFill" />
      </div>
    </div>
  </page-meta>
</template>
<!-- integralRechargePage -->

<script>
export default {
  components: {},
  name: "complaint",
  data() {
    return { isShare: 0, fontsize: "", showIosPopup: false, content: "" };
  },
  methods: {
    async submit() {
      let params = {
        reason: this.content,
        type: 3,
      };
      let res = await this.$http.requestSync("/report_complaints/create", params);
      if (res.code === 200) {
        this.$layer.message("提交成功");
        setTimeout(() => {
          this.$back();
        }, 1500);
      }
    },
    seeHistory() {
      this.$jump("/pages3/complaintHistory");
    },
  },
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-textarea {
  max-height: 200px;
}
.complaint {
  height: 100vh;
  background: #f7f7f7;
  .content_text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin: 15px auto 12px;
    line-height: 22px;
  }
  /deep/.u-textarea {
    width: 93%;
    box-sizing: border-box;
    padding: 15px;
    min-height: 156px;
    background: #ffffff;
    border-radius: 8px;
    margin: 0 auto;
  }
  /deep/.u-textarea__field {
    height: auto !important;
  }
  .submit {
    width: 345px;
    height: 46px;
    background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
    border-radius: 23px 23px 23px 23px;
    font-size: 18px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 46px;
    margin: 30px auto 20px;
  }
  .seeHistory {
    width: 106px;
    display: flex;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    .text {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff8822;
    }
    .icon {
      width: 18px;
      height: 18px;
      margin-left: 4px;
    }
  }
}
</style>
